<!--
* description: 其他项目选择
* author:hzm
* createdDate:2020-4-20
-->

<template>
  <section class="editAreaAudit">
    <el-dialog
      v-dialogDrag
      :visible.sync="curPopupsVisible"
      width="75%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
      @open="openDialog"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />

      <div class="fixHeight">
        <div class="app-container app-container-table">
          <one-table-template
            ref="multipleTable"
            :dynamic-buttons="tableButtons"
            :dynamic-components="tableComponents"
            :dynamic-api-config="dynamicApiConfigs"
            :dynamic-table-cols="tableCols"
            :dynamic-form-fields="formField"
            :dynamic-is-show-select="true"
            :dynamic-is-init-table="true"
            :dynamic-is-fix-choose="false"
            :dynamic-is-fix-index="false"
            :dynamic-is-show-more-btn="true"
            :dynamic-api-style="'restful'"
            :callback-obj="callbackObj"
            :dynamic-table-defult-height="300"
            :is-show-pagination="false"
          />
        </div>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { orgApis } from '@/api/sebasicdataapi'
export default {
  components: {
    OneTableTemplate,
    // inEdit,
    dialogHeader: () => import('@/components/dialogHeader')
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],
  props: {
    isDialogVisible: {
      type: Boolean,
      default: false
    },
    popupsVisible: { type: Boolean, default: false },
    // 已经选择过的数据
    chosenOList: { type: Array, default: () => ([]) }
  },

  data() {
    const viewPageCode = 'areaAudit-edit'
    return {
      selectOther: [],
      editRowData: {},
      editPopupsState: '',
      dynamicTags: [],
      inputValue: '',
      inputVisible: false,
      titleName: '其他项目选择',
      inEditPopupsState: '',
      inEditRowData: {},
      dynamicApiConfigs: orgApis.annexProjectReferenceSystemquery,

      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(1),
          text: this.$t('sys.button.query'),
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey4',
          size: 'small',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          position: 'right' // 重置
        },
        {
          compKey: 'btnKey4',
          size: 'small',
          clickEvent: () => this.sendVal(),
          text: '选择',
          disabled: true,
          position: 'right' // 重置
        }
      ],

      // 动态组件-查询条件
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'subsidyId',
              label: '主键ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'updateControlId',
              label: '并发控制ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'repairOtherName',
              label: '其他项目名称'
            },
            {
              prop: 'repairOtherRemark',
              label: '备注'
            }
          ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '其他项目名称：',
              codeField: 'repairOtherName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true
            }
          ],

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          repairOtherName: '',
          isEnable: '1'

        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
      callbackObj: {
        onCheckSelectChange: (selection) => {
          this.selectOther = selection
          this.handleSelectionChange(selection)
        }
      }
    }
  },
  methods: {
    openDialog() {
      this.$nextTick(() => {
        this.queryTable(1)
      })
    },

    sendVal() {
      this.selectOther.forEach(element => {
        element.otherAmountType = element.repairOtherName
        element.otherAmount = element.otherPrice
        element.remark = ''
        element.servicePackageCode = ''
      })
      this.$emit('toFather', this.selectOther)
      this.curPopupsVisible = false
    },
    // 禁用上个弹窗已选择 数据
    getSelectable(row, index, ref) {
      return !this.chosenOList.includes(row['repairOtherId'])
    },
    // 关闭弹窗
    closeEdit() {
      this.$emit('close')
      this.clearData()
    },

    // 当选择项发生变化时会触发该事件
    handleSelectionChange(selection) {
      const btns = this.tableButtons.filter(o => o.disabled !== undefined)
      if (btns.length > 0) {
        const isCheck = selection && selection.length > 0
        btns.forEach((item) => {
          item.disabled = !isCheck
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
>>> div.fixHeight {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
h3 {
  padding-left: 1%;
  text-align: left;
  font-weight: 600;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.66, 0.3, 0.08, 1.41);
  opacity: 1;
  text-shadow: #c0c4cc 3px 3px 2px;
  /*transform-style: preserve-3d;*/
  /*transform: perspective(900px) translateZ(0) translateX(0);*/
}

h3 button.el-button {
  float: right;
  margin-right: 10px;
}
>>> .el-table .warm-row {
  background: #eedbae;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}
.fixHeight::v-deep .el-checkbox {
  width: 100%;
}
.styleButon {
  height: 24px;
}
.fixHeight::v-deep #searchFormGroup .el-row .el-col .el-col label {
  max-width: 120px !important;
}
</style>
